<template>
  <div class="example2">
    <code-container
      :code="thisCode"
      v-on:close="isShowCode = false"
      v-if="isShowCode"
    ></code-container>
    <div class="border">
      <!-- <a href="JavaScript:;" class="look-code" @click="lookCode('pie')">代码</a> -->
      <data-v-pie :chartOptions="chartOptions"></data-v-pie>
    </div>
    <div class="border">
      <!-- <a href="JavaScript:;" class="look-code" @click="lookCode('radar')">代码</a> -->
      <data-v-radar
        :indicator="indicator"
        :chartOptions="chartOptions"
      ></data-v-radar>
    </div>
    <div class="border">
      <data-v-areaPoly :chartOptions="chartOptions"></data-v-areaPoly>
    </div>
    <div class="border">
      <data-v-multiBar :chartOptions="chartOptions"></data-v-multiBar>
    </div>
    <div class="border">
      <data-v-singleBar :chartOptions="chartOptions"></data-v-singleBar>
    </div>
    <div class="border">
      <data-v-progress :chartOptions="chartOptions"></data-v-progress>
    </div>
    <div class="border">
      <data-v-rankList
        :rankType="1"
        :list="rankList"
        :maxVal="maxVal"
        titleKey="name"
      ></data-v-rankList>
    </div>
    <div class="border">
      <data-v-rankList
        :rankType="2"
        :list="rankList"
        :maxVal="maxVal"
        titleKey="name"
      ></data-v-rankList>
    </div>
    <div class="border">
      <data-v-annularBar :chartOptions="chartOptions"></data-v-annularBar>
    </div>
    <div class="border">
      <data-v-stackBar :chartOptions="chartOptions"></data-v-stackBar>
    </div>
    <div class="border">
      <data-v-annularMutiBar
        :chartOptions="chartOptions"
      ></data-v-annularMutiBar>
    </div>
    <div class="border">
      <data-v-MutiPie :chartOptions="chartOptions"></data-v-MutiPie>
    </div>

    <div class="border">
      <data-v-rankList
        :rankType="4"
        :list="rankList"
        :maxVal="maxVal"
        titleKey="name"
      ></data-v-rankList>
    </div>
    <div class="border">
      <data-v-rankList
        :rankType="3"
        :list="rankList"
        :maxVal="maxVal"
        titleKey="name"
      ></data-v-rankList>
    </div>
    <div class="border">
      <data-v-table :list="list" :headerList="headerList"></data-v-table>
    </div>

    <go-home></go-home>

  </div>
</template>

<script>
import CodeContainer from "./code-container.vue";

export default {
  name: "example2",
  components: {
    CodeContainer
  },
  data() {
    return {
      isShowCode: false,
      chartOptions: {},
      indicator: [
        { name: "（sales）", max: 6500 },
        { name: "（Administration）", max: 16000 },
        { name: "（Information\nTechology）", max: 30000 },
        { name: "（Customer\nSupport）", max: 38000 },
        { name: "（Development）", max: 52000 },
        { name: "（Marketing）", max: 25000 }
      ],
      rankList: [
        { name: "add", count: 811 },
        { name: "sea", count: 116 },
        { name: "aee", count: 80 },
        { name: "yhl", count: 6 },
        { name: "sea", count: 6 },
        { name: "add", count: 80 },
        { name: "sea", count: 6 },
        { name: "aee", count: 80 },
        { name: "yhl", count: 6 },
        { name: "sea", count: 6 }
      ],
      headerList: [
        {
          label: "序号",
          align: "center",
          prop: (item, index) => {
            return `<div>${index + 1}</div>`;
          }
        },
        {
          prop: "name",
          label: "机构名称"
        },
        {
          prop: "time",
          label: "时间"
        },
        {
          label: "状态",
          prop: item => {
            if (item.status == 1) {
              return `<div class='green'>已完成</div>`;
            } else {
              return `<div class='red'>进行中</div>`;
            }
          }
        }
      ],
      list: [
        {
          name: "雁塔区",
          time: "2021.03.08",
          status: 1
        },
        {
          name: "高新",
          time: "2021.03.08",
          status: 2
        }
      ],
      maxVal: 1000
    };
  },
  methods: {
    lookCode(name) {
      let filePath = `./docs/${name}.md`;
      // eslint-disable-next-line no-undef
      let loading = ui.loading(2, "加载中...");
      // eslint-disable-next-line no-undef
      get(filePath).then(res => {
        loading.hide();
        this.thisCode = res;
        this.isShowCode = true;
      });
    }
  },
  mounted() {
    // setTimeout(()=>{
    //   this.chartOptions={
    //     legend:{
    //       textStyle:{
    //         color:'red'
    //       }
    //     }
    //   }
    // },2000)
  }
};
</script>

<style>
.example2 {
  padding: 10px 0;
  height: 100vh;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  background: #000 url(./example1-img/gridBg.png);
  /* justify-content: space-between; */
}

.border {
  padding: 10px;
  border: 1px solid #5e6163;
  box-sizing: border-box;
  height: calc(33.3% - 10px);
  border-radius: 5px;
  display: block;
  margin-left: 10px;
  width: calc(20% - 12px);
  overflow: auto;
}
.border::-webkit-scrollbar {
  display: none;
}

.border a {
  text-align: right;
  display: inline-block;
  width: 100%;
  color: #5e6163 !important;
  font-size: 13px;
  margin-bottom: 5px;
}
.border a:hover {
  color: rgba(10, 175, 252, 0.952) !important;
}

.example2 h1 {
  color: #fff;
}

.example2 .look-code {
  color: rgb(10, 136, 10);
  text-decoration: none;
}

.example2 .look-code:hover {
  color: #1aad19;
}

.dataVsroll {
  height: 200px;
}
.green {
  color: green;
}
.red {
  color: red;
}
</style>
